<template>
    <div>
        <div class="nav">
            <router-link to="/home">主页</router-link>
            / 联系我们
        </div>
        <div class="contactContainer">
            <div class="customeRow">
                <div class="header">
                    <img src="../assets/3.jpg" alt="billingham"/>
                    <div class="headerInfo">
                        <div class="title">联系我们</div>
                        <div class="subTitle">如果您对我们的产品、您的订单、维修等有任何疑问，请与我们联系</div>
                    </div>
                </div>
            </div>

            <div class="formContainer">
                <div class="customeRow">
                    <el-row :gutter="0">
                        <el-col :xs="24" :sm="14" :md="14" :lg="14" :xl="14">
                            <div>
                                <div class="contactFormTitle">联系我们</div>
                                <div class="contactFormSubTitle">请填写快速表单，我们会尽快答复-通常是在同一天或下一个工作日</div>
                                <div class="contactFormMention">(提示：如果您有一般性问题，可以在我们的“常见问题”页面上立即找到答案。)</div>
                                <div class="formContent">
                                    <div class="formContentItem">
                                        <div class="formContentItemLabel">姓名<span class="required">*</span></div>
                                        <div class="inputList">
                                            <div class="inputItem">
                                                <input v-model="formData.firstName"/>
                                                <div>姓</div>
                                            </div>
                                            <div class="inputItem">
                                                <input v-model="formData.lastName"/>
                                                <div>名</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="formContentItem">
                                        <div class="formContentItemLabel">公司<span class="required">*</span></div>
                                        <div class="formContentItemInput">
                                            <input v-model="formData.subscribe"/>
                                        </div>
                                    </div>
                                    <div class="formContentItem">
                                        <div class="formContentItemLabel">邮箱<span class="required">*</span></div>
                                        <div class="formContentItemInput">
                                            <input v-model="formData.email"/>
                                        </div>
                                    </div>
                                    <!--                                    <div class="formContentItem">-->
                                    <!--                                        <div class="formContentItemLabel">您想订阅我们的最新资讯吗？</div>-->
                                    <!--                                        <div class="formContentItemCheckbox">-->
                                    <!--                                            <input v-model="formData.subscribe" type="checkbox" name="category"-->
                                    <!--                                                   value="yes"/><span>是的，请给我发送吧</span>-->
                                    <!--                                        </div>-->
                                    <!--                                    </div>-->
                                    <div class="formContentItem">
                                        <div class="formContentItemLabel">电话<span class="required">*</span></div>
                                        <div class="formContentItemInput">
                                            <input v-model="formData.phone"/>
                                        </div>
                                    </div>
                                    <div class="formContentItem">
                                        <div class="formContentItemLabel">你的信息<span class="required">*</span></div>
                                        <div class="formContentItemInput">
                                            <textarea v-model="formData.information"/>
                                        </div>
                                        <div class="contactFormMention">
                                            最多300个字符
                                        </div>
                                        <div class="contactFormMention">
                                            如果你想知道哪种包适合您的设备，请告诉我们您想要装下哪种型号的相机，镜头，笔记本电脑等，因为不同设备所搭配的包包是不同的。
                                        </div>
                                    </div>
                                </div>
                                <div class="submitContainer">
                                    <el-button @click="handleSubmit()" :disabled="loading">{{loading?'正在提交..':'提交表单'}}
                                    </el-button>
                                </div>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
                            <div class="companyInfo">
                                <div class="companyTitle">公司地址</div>
                                <div class="companyInfoItemList">
                                    <div class="companyInfoItem">M Billingham&CoLtd</div>
                                    <div class="companyInfoItem">City Estate</div>
                                    <div class="companyInfoItem">Corngreaves Rd</div>
                                    <div class="companyInfoItem">Cradley Heath</div>
                                    <div class="companyInfoItem">West Midlands</div>
                                    <div class="companyInfoItem">B64 7EP</div>
                                    <div class="companyInfoItem">英国</div>
                                </div>
                                <!--                                <div class="companyTitle">在发送产品进行维修，退款或退货之前，请与我们联系以获取信息。</div>-->
                                <!--                                <div class="companyTitle">致电我们</div>-->
                                <!--                                <div class="companyInfoItem">电话：+44（0）1384412700</div>-->
                                <!--                                <div class="companyInfoItem">GMT 9:00 AM-5:00 PM- 周一至周五</div>-->
                                <!--                                <div class="companyTitle">给我们发电子邮件</div>-->
                                <!--                                <div class="companyInfoItem">help@billingham.co.uk</div>-->
                                <div class="companyTitle">关注我们</div>
                                <div class="companyInfoItemMedia">
                                    <div class="companyInfoItemMediaImg">
                                        <a target="_blank" href="https://weibo.com/6975612372/manage"><img
                                                src="../assets/weibo2.png" alt="billingham"/></a>
                                    </div>
                                    <div class="companyInfoItemMediaImg">
                                        <el-popover
                                                placement="top"
                                                title=""
                                                width="200"
                                                trigger="manual"
                                                v-model="visible">
                                            <div class="qrcodeContainer">
                                                <div>扫码关注微信公众号</div>
                                                <img class="qrcode"
                                                     src="../assets/3030qrcode_for_gh_1fab81866f33_860.jpg"
                                                     alt="billingham">
                                            </div>
                                            <img slot="reference" style="border-radius:5px" @click="visible = !visible"
                                                 src="../assets/9.jpg" alt="billingham"/>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="mediaListContainer">
                <div class="customeRow">
                    <el-row :gutter="0">
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <div class="mediaItem">
                                <a target="_blank" href="https://weibo.com/6975612372/manage"><img src="../assets/5.jpg"
                                                                                                   alt="billingham"/></a>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                            <div class="mediaItem">
                                <a target="_blank" href="https://mp.weixin.qq.com/s/mP7ovqO8qf67i0Tb1RqFuA"><img
                                        src="../assets/6.jpg" alt="billingham"/></a>

                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Row, Col, Popover, Message, Button} from 'element-ui';
    import serve from '../util/serve';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Popover);
    Vue.use(Button);
    export default {
        name: 'Blog',
        data: () => {
            return {
                visible: false,
                formData: {
                    firstName: '',
                    lastName: '',
                    email: '',
                    phone: '',
                    information: '',
                    subscribe: ''
                },
                loading: false
            }
        },
        metaInfo() {
            return serve.handleSetMeta('contact_us','/contact-us');
        },
        components: {},
        props: {},
        mounted() {
            window.scroll(0, 0);
        },
        methods: {
            /**
             * 处理提交表单事件
             */
            handleSubmit() {
                const {firstName, lastName, phone, email, subscribe, information} = this.formData;
                if (!firstName || !lastName) {
                    Message({
                        message: '姓名不能为空',
                        type: 'error'
                    });
                    return;
                }
                if (!subscribe) {
                    Message({
                        message: '公司不能为空',
                        type: 'error'
                    });
                    return;
                }
                const rex = /^([A-Za-z0-9_\-.\u4e00-\u9fa5])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,8})$/;
                if (!rex.test(email)) {
                    Message({
                        message: '请输入正确邮箱地址',
                        type: 'error'
                    });
                    return;
                }
                if (!/^1[3456789]\d{9}$/.test(phone)) {
                    Message({
                        message: '请输入正确手机号码',
                        type: 'error'
                    });
                    return;
                }
                if (!information) {
                    Message({
                        message: '请输入您的信息',
                        type: 'error'
                    });
                    return;
                }
                if (information.length > 300) {
                    Message({
                        message: '您的信息字数超出上限',
                        type: 'error'
                    });
                    return;
                }
                const _this = this;
                _this.loading = true;
                const submitData = {
                    name: firstName + lastName,
                    email,
                    phone,
                    subscribe,
                    information,
                    fid: 6
                };
                const url = serve.handleGetUrl('contact', {}, 'cloudflare');
                serve.doPost(url, submitData)
                    .then((response) => {
                        _this.loading = false;
                        const data = response.data;
                        if (data.code === 1) {
                            Message({
                                message: '提交成功',
                                type: 'success'
                            });
                            _this.formData = Object.assign({}, _this.formData, {
                                firstName: '',
                                lastName: '',
                                email: '',
                                phone: '',
                                information: '',
                                subscribe: ''
                            })
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    _this.loading = false;
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .companyInfoItemMediaImg {
        display: inline-block;
        margin-right: 10px;
    }

    .companyInfoItemMediaImg img {
        width: 30px;
        height: 30px;
    }

    .companyInfo {
        font-size: 15px;
        padding-left: 70px;
    }

    .companyTitle {
        font-weight: bold;
        margin-top: 25px;
        line-height: 28px;
        color: black;
    }

    .companyInfoItemList {
        margin-top: 10px;
    }

    .companyInfoItem {
        line-height: 26px;
    }

    .formContainer {
        padding: 40px 0;
    }

    .contactFormTitle {
        font-size: 16px;
        font-weight: bold;
        color: black;
    }

    .contactFormSubTitle {
        font-size: 12px;
        margin-top: 20px;
    }

    .contactFormMention {
        font-size: 12px;
        margin-top: 5px;
    }

    .formContent {
        background: #D9D9D9;
        padding: 0 20px 70px 20px;
        color: black;
        margin-top: 20px;
    }

    .formContentItem {
        padding-top: 20px;
    }

    .formContentItemLabel {
        font-weight: bold;
        font-size: 15px;
    }

    .formContentItemLabel .required {
        color: #c4384c;
        margin-left: 3px;
    }

    .inputList {
        display: flex;
        margin-top: 3px;
    }

    .inputItem {
        width: 174px;
    }

    .inputItem:last-child {
        width: calc(100% - 199px);
        margin-left: 20px;
    }

    .inputItem input {
        height: 36px;
        border: none;
        outline: none;
        padding-left: 5px;
        width: 100%;
    }

    .inputItem div {
        font-size: 14px;
    }

    .formContentItemInput {
        width: 100%;
        margin-top: 3px;
    }

    .formContentItemCheckbox {
        padding: 5px 0;
        position: relative;
    }

    .formContentItemCheckbox span {
        position: absolute;
        top: 8px;
        font-size: 15px;
    }

    .formContentItemCheckbox input[type=checkbox i] {
        height: 20px;
        width: 20px;
    }

    .formContentItemInput input {
        height: 36px;
        border: none;
        outline: none;
        padding-left: 5px;
        width: calc(100% - 5px);
    }

    .formContentItemInput textarea {
        height: 120px;
        border: none;
        outline: none;
        padding: 0 5px;
        width: calc(100% - 10px);
    }

    .submitContainer {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: black;
        text-align: center;
    }

    .submitContainer button {
        width: 160px;
        height: 32px;
        font-size: 15px;
        font-weight: bold;
        color: #000;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        padding: 0;
    }

    .submitContainer .el-button:focus, .el-button:hover {
        background: #fff;
    }

    .header {
        margin-top: 10px;
        position: relative;
    }

    .header img {
        width: 100%;
    }

    .header .headerInfo {
        color: #fff;
        position: absolute;
        top: calc(50% - 40px);
        text-align: center;
        width: 100%;
    }

    .header .headerInfo .title {
        font-size: 22px;
    }

    .header .headerInfo .subTitle {
        font-size: 14px;
    }

    .mediaListContainer {
        padding: 30px 0;
    }

    .mediaItem {
    }

    .mediaItem img {
        width: 100%;
        height: 100%;
    }

    @media screen and (max-width: 420px) {
        .companyInfo {
            padding-left: 0;
        }

        .header .headerInfo .title {
            font-size: 16px;
        }

        .formContainer {
            padding: 30px 10px;
        }

        .inputItem {
            width: 104px;
        }

        .inputItem:last-child {
            width: calc(100% - 129px);
            margin-left: 20px;
        }

        .header img {
            width: 100%;
        }

        .mediaListContainer {
            padding-top: 0;
        }

        .mediaItem {
            height: 169px;
            margin-top: 20px;
        }

        .companyTitle {
            margin-top: 15px;
        }
    }
</style>
